import { useState } from 'react';
import { AlertDialog, type IAlertDialogProps } from '../dialog';
import IconButton, { type IconButtonProps } from '@mui/material/IconButton';

export type IAlertDialogIconButtonProps = IconButtonProps & {
  alertDialogProps?: IAlertDialogProps;
};

export const AlertDialogIconButton = ({ children, alertDialogProps, ...props }: IAlertDialogIconButtonProps) => {
  const [open, setOpen] = useState<boolean | undefined>(false);

  const handleClick = () => {
    setOpen(true);
  };

  return (
    <>
      <IconButton {...props} onClick={handleClick}>
        {children}
      </IconButton>
      <AlertDialog {...alertDialogProps} open={open} onOpenChange={setOpen} />
    </>
  );
};
